import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:myjd/api/Category.dart';
import 'package:myjd/api/index.dart';
import 'package:myjd/config/MyColors.dart';
import 'package:myjd/utils/ScreenAdaper.dart';

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage>
    with AutomaticKeepAliveClientMixin {
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  //state
  int _activeIndex = 0;
  List leftList = [];
  List rightList = [];
  String parentId = null;

  //init hooks
  @override
  void initState() {
    super.initState();
    this._getInitData();
  }

  _getInitData() async {
    await this._getLeft();
    await this._getRight();
  }

  _getLeft() async {
    Response result = await CategoryApi.getLeft();
    print(result.data);
    setState(() {
      this.leftList = result.data["result"];
    });
  }

  _getRight() async {
    String id = this.leftList[_activeIndex]["_id"];
    Response result = await CategoryApi.getRight(id);
    print(result.data);
    setState(() {
      this.rightList = result.data["result"];
    });
  }

  @override
  Widget build(BuildContext context) {
    //传入设计稿的宽度，以后直接写设计稿的宽度即可.
    ScreenAdaper.init(context);
    return Row(
      children: <Widget>[
        Expanded(
            flex: 1,
            child: Container(
              child: ListView.builder(
                itemCount: this.leftList.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: <Widget>[
                      InkWell(
                        child: Container(
                            child: Center(
                              child: Text(
                                this.leftList[index]["title"],
                                style: TextStyle(
                                    color: this._activeIndex == index
                                        ? Colors.white
                                        : Colors.black54),
                              ),
                            ),
                            height: ScreenAdaper.height(84),
                            decoration: BoxDecoration(
                                color: this._activeIndex == index
                                    ? MyColors.theme
                                    : Colors.white,
                                border: Border(
                                  bottom: BorderSide(
                                      width: 1,
                                      color: Colors.black26,
                                      style: BorderStyle.solid),
//                                    right: BorderSide(
//                                        width: 1,
//                                        color: Colors.black26,
//                                        style: BorderStyle.solid)
                                ))),
                        onTap: () {
                          print(index);
                          setState(() {
                            this._activeIndex = index;
                            this._getRight();
                          });
                        },
                      ),
                    ],
                  );
                },
              ),
            )),
        Expanded(
            flex: 3,
            child: Padding(
              padding: EdgeInsets.all(0),
              child: Container(
                  padding: EdgeInsets.all(10),
                  color: Color.fromRGBO(240, 246, 246, 0.9),
                  child: GridView.builder(
                      physics: BouncingScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          childAspectRatio: 1 / 1.2,
                          crossAxisSpacing: 10,
                          mainAxisSpacing: 10),
                      itemCount: this.rightList.length,
                      itemBuilder: (context, index) {
                        return InkWell(
                          onTap: () {
                            print(this.rightList[index]["_id"]);
                            Navigator.pushNamed(context, '/productList',
                                arguments: {
                                  "cid": this.rightList[index]["_id"]
                                });
                          },
                          child: Container(
                            child: Column(
                              children: <Widget>[
                                AspectRatio(
                                  aspectRatio: 1 / 1,
                                  child: Image.network(
                                      ApiBase.baseURL +
                                          "${this.rightList[index]["pic"].replaceAll("\\", "/")}",
                                      fit: BoxFit.cover),
                                ),
                                Container(
                                    child: AspectRatio(
                                  aspectRatio: 1 / 0.2,
                                  child: Container(
                                    //                                  color: Colors.red,
                                    child: Center(
                                      child: Text(
                                          '${this.rightList[index]["title"]}'),
                                    ),
                                  ),
                                ))
                              ],
                            ),
                          ),
                        );
                      })),
            ))
      ],
    );
  }
}
